<template>
  <div>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item href="/images/list">图片列表</Breadcrumb-item>
      <Breadcrumb-item>{{ id ? '编辑' : '新增' }}图片</Breadcrumb-item>
    </Breadcrumb>
    <div>
      <Form ref="formImage" :model="formImage" :rules="ruleValidate" :label-width="100">

        <Form-item label="标识" prop="id">
          <Row>
            <Col span="12">
              <Input v-model="formImage.id"/>
            </Col>
          </Row>
        </Form-item>

        <Form-item label="企业" prop="company">
          <Row>
            <Col span="12">
              <Input v-model="formImage.company" :readonly="!!id"/>
            </Col>
          </Row>
        </Form-item>

        <Form-item label="工位名称" prop="station">
          <Row>
            <Col span="12">
              <Input v-model="formImage.station" :readonly="!!id"/>
            </Col>
          </Row>
        </Form-item>

        <Form-item label="工位号" prop="num">
          <Row>
            <Col span="12">
              <Input v-model="formImage.num" :readonly="!!id"/>
            </Col>
          </Row>
        </Form-item>

        <Form-item label="记录时间" prop="created">
          <Row>
            <Col span="12">
              <Input :value="getTimeText(formImage.created)" :readonly="!!id"/>
            </Col>
          </Row>
        </Form-item>

        <Form-item label="图片路径" prop="filepath">
          <Row>
            <Col span="12">
              <Input v-model="formImage.filepath" :readonly="!!id"/>
            </Col>
          </Row>
        </Form-item>

        <Form-item label="图片" prop="url">
          <Row>
            <Col span="12">
              <img class="record-img" :src="getFullUrl(formImage.url)" />
            </Col>
          </Row>
        </Form-item>

        <Form-item>
          <Button type="ghost" @click="$router.back()">返回</Button>
        </Form-item>
      </Form>
    </div>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Config from '@/config'
  // import Account from '@/service/account'
  // import AccountPerm from '@/service/accountPerm'
  // import Rest from '@/service/rest'
  import Util from '@/service/util'

  export default {
    name: 'ImageForm',
    components: {
    },
    data () {
      return {
        id: '',
        formImage: {
          id: '',
          name: '',
          url: '',
          altUrl: '',
          outPath: '',
          httpPrefix: '',
          memo: ''
        },
        ruleValidate: {
          name: [
            {
              required: true,
              message: '名称不能为空'
            },
            {
              max: 100,
              message: '名称不能多于 100 个字'
            }
          ],
          url: [
            {
              required: true,
              message: 'URL不能为空'
            }
          ],
          httpPrefix: [
            {
              required: true,
              message: '该输出路径的HTTP URL不能为空'
            }
          ]
        }
      }
    },
    computed: {
      ...mapState(['images'])
    },
    watch: {
      'images.image': {
        handler (newVal) {
          this.$set(this, 'formImage', newVal)
        }
      }
    },
    created () {
      this.id = this.$route.params.id
      this.id && this.get(this.id)
    },
    methods: {
      get (id) {
        this.$store.dispatch('getImage', {id}).then((data) => {
        })
      },
      handleSave () {
        this.$refs.formImage.validate((valid) => {
          if (valid) {
            const action = this.id ? 'putImage' : 'postImage'

            this.$store.dispatch(action, this.formImage).then(() => {
              this.$Message.success((this.id ? '编辑' : '新增') + '成功！')
              !this.id && this.resetFields()

              if (!this.id) {
                this.$router.back()
              }
            })
          }
        })
      },
      getFullUrl (url) {
        return Config.BASE_URL + url
      },
      getTimeText (seconds) {
        return Util.getTimeText(seconds)
      },
      resetFields () {
        let type = this.formImage.type
        let parent = this.formImage.parent

        this.$refs.formImage.resetFields()

        this.formImage.type = type
        this.formImage.parent = parent
      }
    }
  }
</script>

<style scoped>

.upload-img {
  width: 80px;
  height: 60px;
  margin-top: 8px;
}

.bm-view {
  width: 100%;
  height: 400px;
}

.record-img {
  max-width: 960px;
}

</style>

